<style>
</style>

<template>
<Main>
    <div slot="phone-menu">
        <member-menu></member-menu>
    </div>
    <div slot="content">
        <breadcrumb-nav :currentPath="currentPath" mgt2></breadcrumb-nav>
        <Row :gutter="30" mgt2>
            <Col v-if="!isPhone" span="6" bg1 pd4>
                <div style="position:relative;overflow:visible;" h6 w6 bd-gray4 bd-circle bg-cover center :style="{'background-image':`url(${member.head})`}">
                    <div style="position:absolute;right:0;bottom:0;width:26px;height:26px;" bd-circle nobd bg-orange>
                        <img src="../images/level-v1.png" full pd1>
                    </div>
                </div>
                <p sz1 mgt2 text-center>{{member.userName}}</p>
                <p mgt2 text-center>我的积分：<span blue>{{member.xpValue}}</span></p>

                <div mgl3>
                    <p strong mgt5 sz1>交易管理</p>
                    <p mgt3><router-link :to="{name:'member-order'}" sz1 gray2 linkable>我的订单</router-link></p>
                    <p mgt3><router-link :to="{name:'member-refund'}" sz1 gray2 linkable>我的退款/售后</router-link></p>
                    <p mgt3><router-link :to="{name:'member-xp'}" sz1 gray2 linkable>我的积分</router-link></p>

                    <p strong mgt5 sz1>评价管理</p>
                    <p mgt3><router-link :to="{name:'member-commodity-evaluation'}" sz1 gray2 linkable>商品评价</router-link></p>
                    <!-- <Button type="text" :to="{name:'member-article-comment'}" sz1 gray2 mgt2 text-left long>文章评论</Button> -->

                    <p strong mgt5 sz1>我的账户</p>
                    <p mgt3><router-link :to="{name:'member-profile'}" sz1 gray2 linkable>个人资料</router-link></p>
                    <p mgt3><router-link :to="{name:'member-address'}" sz1 gray2 linkable>收货地址</router-link></p>
                    <p mgt3><router-link :to="{name:'member-change-password'}" sz1 gray2 linkable>修改密码</router-link></p>
                    <p mgt3><router-link :to="{name:'member-coupon'}" sz1 gray2 linkable>我的优惠券</router-link></p>
                    <p mgt3><router-link :to="{name:'member-collection'}" sz1 gray2 linkable>我的收藏</router-link></p>

                    <p mgt5 strong><router-link :to="{name:'member-notice'}" sz1 gray2 linkable>会员公告</router-link></p>
                </div>
            </Col>
            <Col :span="isPhone?24:18">
                <router-view></router-view>
            </Col>
        </Row>
    </div>
</Main>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../lib/abpbase'
import Main from './main.vue'
import MemberMenu from './member-menu.vue'
import breadcrumbNav from '../components/breadcrumb-nav.vue';

@Component({
    components: { Main, MemberMenu, breadcrumbNav }
})
export default class MemberTemplate extends AbpBase{
	get member() {
		return this.$store.state.self.member;
	}
	get currentPath () {
		return this.$store.state.app.currentPath;
	}
}
</script>

